<template>
<div class="">
  <Row>
    <Col span="12" class="title clearfix">卵胚受精</Col>
  </Row>
  <div class="line"></div>
  <div class="MainBox">
    <Form :model="EmbryosInduction" label-position="left" :label-width="50">
      <Form-item label="受精数量">
        <Input v-model="EmbryosInduction.fertilization_num"></Input>
      </Form-item>
      <div class="clearfix">
        <p style="float:left;">相关报告</p>
      </div>
      <UploadHelperForKey :showdata="EmbryosInduction['fertilized_eggs']" uploadkey="fertilized_eggs" label="受精卵报告:" />
      <UploadHelperForKey :showdata="EmbryosInduction['embryo_evaluation']" uploadkey="embryo_evaluation" label="胚胎评定报告" />
      <UploadHelperForKey :showdata="EmbryosInduction['chromosome_diagnosis']" uploadkey="chromosome_diagnosis" label="染身体诊断报告" />
      <UploadHelperForKey :showdata="EmbryosInduction['fertilization_other']" uploadkey="fertilization_other" label="其他图片" />
      <Form-item label="备注:">
        <Input v-model="EmbryosInduction.fertilization_remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
      </Form-item>
      <submit-button @submit="submit" @cancel="cancel"></submit-button>
    </Form>
  </div>
</div>
</template>
<script>
import UploadHelperForKey from '../components/UploadHelperForKey';
import SubmitButton from "../components/SubmitButton"
import Store from '../store'
import api from '../js/axios-module'
export default {

  data() {
    return {
      EmbryosInduction: {
      }
    }
  },
  created: function() {
    this.EmbryosInduction = Store.fetch(Store.EMBRYOSINDUCTION_KEY)
  },
  components: {
    UploadHelperForKey,
    SubmitButton
  },
  methods: {
    getData: function() {
      api.getEmbryosInduction().then(response => {
        this.EmbryosInduction = response.data.data;
      }, err => {
        console.log(err)
      });
    },
    submit: function() {
      const data = {
        'fertilization_num': this.EmbryosInduction.fertilization_num,
        'fertilization_remarks': this.EmbryosInduction.fertilization_remarks
      }
      api.editEmbryosInduction(data).then(response=>{
        if(response.data.code == '200'){
          this.$Message.success('提交成功');
        }else{
          this.$Message.error('提交失败');
        }
      });
    },
    cancel: function() {
      console.log("cancel")
    },
  },
  watch: {
    EmbryosInduction: {
      handler: function(embryosInduction) {
        Store.save(embryosInduction, Store.EMBRYOSINDUCTION_KEY)
      },
      deep: true
    }
  },
  mounted: function() {
    this.getData()
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
</style>
